<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪资查询</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/found.css">
</head>
<body>
    <!-- 第一部分 -->
    <section class="wrap">
        <!-- 头部区域 -->
         <header class="header">
            <a href="./index.html"></a>
           薪资查询
        </header>
         <p class="title">参考薪资</p>
        <section class="content">
            <div class="hd">
                <span>北京</span>
                <span>地区</span>
                <span>JAVA岗位</span>
                <span>1-3年工作经验的参考薪资</span>
            </div>
            <div class="price"><em>￥</em>1,8821</div>
            <div class="sum">现有23131个岗位</div>
        </section>

    </section>

    <!-- 薪资发布 -->
     <section class="publish">
        <p class="title">薪资发布</p>
        <div class="pub_con">
            <div class="pub_icon">
                <img src="./icons/pub_icon.png" alt=""> 
            </div>
            <div class="pub_info">
                <div class="info_hd">
                    <span>区间</span>
                    <span>占比</span>
                </div>
                <div class="info_bd">
                   <div class="info_item">
                    <div class="price">4.5k-6k</div>
                    <div class="view1"></div>
                    <div class="percent">1.2%</div>
                   </div>
                   <div class="info_item">
                    <div class="price">6k-8k</div>
                    <div class="view2"></div>
                    <div class="percent">3.5%</div>
                   </div>
                   <div class="info_item">
                    <div class="price">8k-10k</div>
                    <div class="view3"></div>
                    <div class="percent">4.4%</div>
                   </div>
                   <div class="info_item">
                    <div class="price">10k-15k</div>
                    <div class="view4"></div>
                    <div class="percent">16%</div>
                   </div>
                   <div class="info_item">
                    <div class="price">15k-12k</div>
                    <div class="view5"></div>
                    <div class="percent">18.9%</div>
                   </div>
                 
                   <div class="info_item">
                    <div class="price">20k-30k</div>
                    <div class="view6"></div>
                    <div class="percent">35.7%</div>
                   </div>
                   <div class="info_item">
                    <div class="price">30k-50k</div>
                    <div class="view7"></div>
                    <div class="percent">18.8%</div>
                   </div>
                  
                </div>
            </div>
        </div>
     </section>
     <!-- 各地区薪资 -->
      <div class="other_area">
        <p class="title">各地区薪资</p>
        <div class="area_info">
            <div class="area_item">
                <div class="area"> <span class="num">1</span>北京</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>18981</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">2</span>上海</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>18000</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">3</span>广州</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>15880</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">4</span>杭州</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>14800</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">5</span>天津</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>13800</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">6</span>太原</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>12800</div>
            </div>
            <div class="area_item">
                <div class="area"> <span class="num">7</span>西安</div>
                <div class="datshed"></div>
                <div class="pric"><em>￥</em>10000</div>
            </div>
        </div>
      </div>
</body>
</html>